<template>
  <div class="main">
    <div class="header">
      <el-menu class="el-menu-demo header-menu" mode="horizontal"
               default-active="1" @select="handleSelect"
               background-color="#07070F" text-color="#fff"
               active-text-color="#409EFF">
        <el-menu-item index=1>首页</el-menu-item>
        <el-menu-item index=2>用户</el-menu-item>
        <el-menu-item index="3">餐馆</el-menu-item>
        <el-menu-item index="4">金券</el-menu-item>
        <el-menu-item index="5">地图</el-menu-item>
        <el-submenu index="6" class="menu-logout">
          <template slot="title" style="width: 100px">欢迎您，root</template>
          <el-menu-item index="7" @click="back">登出</el-menu-item>
        </el-submenu>
      </el-menu>
    </div>
    <div class="content">
      <Index v-show="currentActive === 1"></Index>
      <UserData v-show="currentActive === 2"></UserData>
      <RestaurantData v-show="currentActive === 3"></RestaurantData>
      <VoucherData v-show="currentActive === 4"></VoucherData>
      <MapData v-show="currentActive === 5"></MapData>
    </div>
  </div>
</template>

<script>
import Index from "@/components/admin/Index";
import UserData from "@/components/admin/UserData";
import RestaurantData from "@/components/admin/RestaurantData";
import VoucherData from "@/components/admin/VoucherData";
import MapData from "@/components/admin/MapData";

export default {
  name: "Manager",
  components: {
    Index,
    UserData,
    RestaurantData,
    VoucherData,
    MapData,
  },
  data() {
    return {
      currentActive: 4,
    }
  },
  methods: {
    // 处理菜单项之间的切换
    handleSelect(key) {
      let temp = parseInt(key)
      if (temp <= 5) {
        this.currentActive = temp
      }
    },

    // 回到登录界面
    back() {
      this.$router.push({ path: "/admin/login" })
    }
  }
}
</script>

<style lang="less" scoped>
.main {
  background: url("../../assets/images/admin/manage/background.jpg") no-repeat;
  background-size: cover;
  position: absolute;
  width: 100%;
  padding-bottom: 10%;
  .header {
    width: 80%;
    margin: 0 auto 100px;
    padding: 0 15px;
    .header-menu {
      .menu-logout {
        float: right;
      }
    }
  }
  .content {
    height: 80%;
  }
}
</style>